<%@ page import="com.vo.Students" %>
<%@ page import="com.factory.DAOFactory" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示所有学生信息</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="vendor/bootstrap-5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #005eb6;
            --secondary-color-1: #117e42;
            --secondary-color-2: #ffd700;
            --neutral-dark: #2e2e2e;
            --neutral-light: #ffffff;
            --neutral-gray-dark: #c4c4c4;
            --neutral-gray-light: #e2e2e2;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--neutral-light);
            color: var(--neutral-dark);
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color-1));
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .search-container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 1rem;
            background-color: var(--neutral-light);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .search-form .form-control {
            border-radius: 20px;
            padding: 0.8rem 1.5rem;
            border: 1px solid var(--neutral-gray-light);
        }

        .search-form .btn {
            border-radius: 20px;
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
        }

        .search-form .btn:hover {
            background-color: #004a8c;
        }

        .table-container {
            max-width: 1000px;
            margin: 2rem auto;
            background-color: var(--neutral-light);
            border-radius: 10px;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid var(--neutral-gray-light);
        }

        .table {
            margin-bottom: 0;
        }

        .table th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
        }

        .table td {
            vertical-align: middle;
            border: 1px solid var(--neutral-gray-light);
        }

        .action-btn {
            padding: 0.3rem 0.8rem;
            border-radius: 5px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-edit {
            background-color: var(--secondary-color-1);
            color: white;
        }

        .btn-edit:hover {
            background-color: #0c5a21;
        }

        .btn-delete {
            background-color: var(--neutral-gray-dark);
            color: white;
        }

        .btn-delete:hover {
            background-color: #888888;
        }

        .add-btn {
            display: block;
            width: 180px;
            margin: 2rem auto;
            padding: 0.8rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .add-btn:hover {
            background-color: #004a8c;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .empty-result {
            text-align: center;
            padding: 2rem;
            color: var(--neutral-gray-dark);
        }

        .pagination .page-link {
            border-radius: 20px;
            margin: 0 5px;
        }

        .pagination .active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<!-- 页面标题 -->
<header class="header text-center">
    <h1>学生信息管理系统</h1>
</header>

<!-- 搜索框 -->
<div class="search-container">
    <form class="search-form d-flex" action="showStudents.jsp" method="get">
        <input
                class="form-control me-2"
                type="search"
                name="searchKeyword"
                placeholder="请输入学号、姓名或性别"
                value="<%= request.getParameter("searchKeyword") != null ? request.getParameter("searchKeyword") : "" %>">
        <button class="btn" type="submit">搜索</button>
    </form>
</div>

<!-- 学生信息表格 -->
<div class="table-container">
    <table class="table table-hover align-middle">
        <thead>
        <tr>
            <th scope="col">学号</th>
            <th scope="col">姓名</th>
            <th scope="col">密码</th>
            <th scope="col">性别</th>
            <th scope="col">班级号</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <%
            String searchKeyword = request.getParameter("searchKeyword");
            List<Students> all = new ArrayList<>();

            if (searchKeyword == null || searchKeyword.isEmpty()) {
                try {
                    all = DAOFactory.getStudentsDAOInstance().findAllStudents();
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            } else {
                try {
                    all = DAOFactory.getStudentsDAOInstance().searchStudents(searchKeyword);
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }

            if (!all.isEmpty()) {
                for (Students stu : all) {
        %>
        <tr>
            <td><%= stu.getStudentId() %></td>
            <td><%= stu.getStudentName() %></td>
            <td><%= stu.getStudentPwd() %></td>
            <td><%= stu.getGender() %></td>
            <td><%= stu.getClassId() %></td>
            <td>
                <a href="updateStudents.jsp?studentId=<%= stu.getStudentId() %>" class="action-btn btn-edit" >修改</a>
                <button class="action-btn btn-delete" onclick="confirmDelete('<%= stu.getStudentId() %>')">删除</button>
            </td>
        </tr>
        <%
            }
        } else {
        %>
        <tr>
            <td colspan="6" class="empty-result">未找到相关学生信息！</td>
        </tr>
        <%
            }
        %>
        </tbody>
    </table>
</div>

<!-- 添加学生按钮 -->
<button class="add-btn" onclick="window.location.href='insertStudents.jsp'">添加一条学生信息</button>

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="vendor/bootstrap-5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    // JavaScript 函数，用于确认删除操作
    function confirmDelete(studentId) {
        if (confirm("确定要删除该学生信息吗？")) {
            window.location.href = "deleteStudents.jsp?studentId=" + studentId;
        }
    }
</script>
</body>
</html>